<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Double Fault &beta;</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <!-- 
            jQTouch Clock Demo
            All custom code is embedded below:
        -->
        <link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
        <script type="text/javascript" charset="utf-8">
            $.jQTouch({
                icon: 'icon.png',
                startupScreen: 'img/startup.png'
            });
            $(function(){
                $("#archive").click(function() {
                    alert("Archive");
                });
            });
        </script>
    </head>
    <body>

        <!-- Play -->
        <div id="home" class="current">
            <!--
            <div class="toolbar">
                <h1>Double Fault</h1>
                <a href="#setup" class="button leftButton flip">Setup</a>
                <a href="#help" class="button rightButton flip">Help</a>
            </div>
            -->
            <div id="court">
                <p>This is where the court will be</p>
            </div>
            <ul class="individual">
                <li><a href="#setup" class="slide">Setup</a></li>
                <li><a href="#help" class="slide">Help</a></li>
                <li><a href="#archive" class="slide">Archive</a></li>
            </ul>
            <div id="control">
                <a href="#" id="submit" class="grayButton goback">Submit</a>
                <a href="#" id="submit" class="grayButton goback">Submit</a>
                <a href="#" id="submit" class="grayButton goback">Submit</a>
                <a href="#" id="submit" class="grayButton goback">Submit</a>
            </div>
            <div class="info">
                <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
            </div>
        </div>

        <!-- Setup -->
        <div id="setup">
            <div class="toolbar">
                <h1>Setup</h1>
                <a href="#home" class="button back">Home</a>
            </div>
            <div class="form" id="setup_form">
                <form id="setup_info">
                    <ul class="rounded">
                        <li><input type="text" id="player" name="Player" placeholder="player"></li>
                        <li><input type="text" id="opponent" name="Opponent" placeholder="opponent"></li>
                        <li><input type="text" id="email" name="Email" placeholder="email"></li>
                    </ul>
                    <a href="#" id="submit" class="grayButton goback">Submit</a>
                </form>
            </div>
        </div>


        <!-- Help -->
        <div id="help">
            <div class="toolbar">
                <h1>Help</h1>
                <a href="#home" class="button back">Home</a>
            </div>
            <div class="info">
                <p>
                    <p>
                    <strong>Introduction</strong>
                    APPNAME will help you keep track of the stats of your kids tennis games. 
                    The stats are stored in a remote database to easily track his/her performance.
                    </p>
                    <br>
                    <p style="text-align: left;">
                    <bold>Instructions</bold>
                    <br>
                    To start a game hit "Setup" and enter the email address and other details. 
                    The email address will be used to store and retrieve the stats in the database.<br>
                    <br>
                    Once the email address is setup you can save and retrieve data using 
                    the "Archive" and "Stats" buttons.<br>
                    <br>

                    To start a serve or to receive a serve, tap the S or R button 
                    based on where your player is serving or receving the serve.<br>
                    <br>

                    The highlighted areas either activate a point over areas or a fault area. 
                    So if you hit on the winning areas like ACE or WIN, the score for that player is incremented.<br>
                    <br>

                    If you tap any of the error areas the opponents score is incremented.<br>

                    <br>
                    If you tap any of the net areas or fault areas the serve will be counted as first serve.<br>
                    <br>

                    All the scores are kept by the App based on how the user taps the screen.<br>
                    <br>

                    In case you close the App you can retrieve incomplete game data from the database 
                    by using the same email id in "Setup"<br>
                    <br>

                    Once the match is over, the store is archived and the entry closed for update. 
                        I.e. the next time you try to save the stats a new entry is created in the database.<br>
                    <br>

                    To undo an action just retap the S or R button and the score for that point is not counted<br>
                    <br>

                    To save this app tap the '+' button at the bottom of the screen and save tap "Add to Home Screen"<br>
                    <br>

                    </p>
                </p>
            </div>
        </div>

    </body>
</html>
